<!--支付宝充值后的结果页面-->
<template>
    <div class="app-container">
        <el-card class="box-card">
            <div class="payment-result">
                <div class="result-icon">
                    <el-icon v-if="paymentSuccess" class="success-icon" :size="64">
                        <CircleCheckFilled />
                    </el-icon>
                    <el-icon v-else class="error-icon" :size="64">
                        <CircleCloseFilled />
                    </el-icon>
                </div>
                <div class="result-title">
                    {{ paymentSuccess ? '支付成功' : '支付失败' }}
                </div>
                <div class="result-desc">
                    {{ paymentSuccess ? '您的账户已成功充值，余额已更新' : '支付过程中遇到问题，请稍后重试' }}
                </div>
                <div class="result-actions">
                    <el-button type="primary" @click="goToProfile">返回个人中心</el-button>
                    <el-button v-if="!paymentSuccess" @click="retryPayment">重新支付</el-button>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { CircleCheckFilled, CircleCloseFilled } from '@element-plus/icons-vue';

const route = useRoute();
const router = useRouter();

// 支付结果状态
const paymentSuccess = ref(false);
const orderNo = ref('');

// 在组件挂载时检查支付状态
onMounted(async () => {
    // 从URL参数中获取支付结果和订单号
    const status = route.query.status as string;
    orderNo.value = route.query.orderNo as string || '';

    if (status === 'success') {
        paymentSuccess.value = true;
        ElMessage.success('支付成功');
    } else {
        paymentSuccess.value = false;
        ElMessage.error('支付失败');
    }
});

// 返回个人中心
const goToProfile = () => {
    router.push('/profile');
};

// 重新支付
const retryPayment = () => {
    router.push('/profile');
    // 延迟一下再打开充值对话框，确保个人中心页面已加载
    setTimeout(() => {
        // 这里可以通过事件总线或其他方式通知个人中心页面打开充值对话框
        ElMessage.info('请在个人中心重新发起充值');
    }, 500);
};
</script>

<style scoped>
.app-container {
    width: 100%;
    height: 100%;
}

.box-card {
    width: 100%;
    height: 50%;
}

.payment-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0;
}

.result-icon {
    margin-bottom: 24px;
}

.success-icon {
    color: #67c23a;
}

.error-icon {
    color: #f56c6c;
}

.result-title {
    font-size: 24px;
    font-weight: 500;
    color: #303133;
    margin-bottom: 16px;
}

.result-desc {
    font-size: 14px;
    color: #606266;
    margin-bottom: 24px;
}

.result-actions {
    display: flex;
    gap: 16px;
}
</style>